<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->

		<view class="bid-box com-box">
			<view class="bid-list">
				<view v-for="(item, index) in bidList" :key="index" class="bid-item" @click="navToDetailPage(item)">
					<text class="title">{{item.goodsName}}</text>
					<view class="flex-item">
						<view class="left-wrapper">
							<text class="clamp">公司：{{item.sellerName}}</text>
							<text class="clamp">联系方式：{{item.phone}}</text>
							<text class="clamp">需求地址：{{item.sendAddress}}</text>
							<text class="clamp">截止时间：{{$util.sliceTime(item.effectiveTime)}}</text>
							<text class="clamp">送达时间：{{$util.sliceTime(item.sendTime)}}</text>
						</view>
						<view class="right-wrapper">
							<view class="num">
								<text>需求数量</text>
								<text>{{item.num}}吨</text>
							</view>
							<view class="size">
								<text>规格</text>
								<text>{{item.specifications}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- #ifdef H5 -->
			<uni-pagination :num='pageNum' :page='pages' @pagechange="pagechange"></uni-pagination>
			<!-- #endif -->
			<uni-load-more class="sp" :status="loadingType"></uni-load-more>

		</view>

		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->

	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue'
	import uniHeader from '@/components/h5/uni-header.vue'
	import uniFooter from '@/components/h5/uni-footer.vue'
	import uniPagination from '@/components/h5/uni-pagination.vue'
	export default {
		components: {
			uniLoadMore,
			uniHeader,
			uniFooter,
			uniPagination
		},
		data() {
			return {
				loadingType: 'more', //加载更多状态
				bidList: [],
				pageNum: 1,
				pageSize: 10,
				pages: 0,
			}
		},
		onLoad(option) {
			this.loadData()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData('refresh')
		},
		//加载更多
		onReachBottom() {
			this.loadData()
		},
		methods: {
			pagechange(currentPage) {
				console.log(currentPage)
				// ajax请求, 向后台发送 currentPage, 来获取对应的数据
				uni.showLoading({
					title: '正在加载'
				})
				this.pageNum = currentPage
				this.loadData('current')
			},
			//加载商品 ，带下拉刷新和上滑加载
			loadData(type = 'add') {
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return
					}
					this.loadingType = 'loading'
				} else {
					this.loadingType = 'more'
				}
				if (type === 'refresh') {
					this.pageNum = 1
				}
				this.$api.request('/publishingNeeds/userPublishingNeedPage', {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}, {
					method: 'GET'
				}).then(res => {
					let tempList = res.data.pageList
					if (type !== 'add') {
						this.bidList = []
					}
					this.pages = Math.ceil(res.data.total / this.pageSize)
					this.loadingType = this.pageNum < this.pages ? 'more' : 'nomore'
					this.bidList = this.bidList.concat(tempList)
					this.pageNum = this.pageNum + 1
					if (type !== 'add') {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}
				})
			},
			//详情
			navToDetailPage(item) {
				uni.navigateTo({
					url: `/pages/bid/company?id=${item.id}`
				})
			}
		},
	}
</script>

<style lang="scss">
	.container {
		// padding-bottom: 80upx;
	}

	.bid-box {
		padding-top: 20upx;
	}

	/* 投标列表 */
	.bid-list {
		margin: 0 $base-row-spacing;
		background-color: inherit;

		.bid-item {
			margin-bottom: 20upx;
			border-radius: 20upx;
			overflow: hidden;
			box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
			border-bottom: 0;
			background-color: #fff;
		}

		.flex-item {
			display: flex;
			width: 100%;
			border-radius: 10upx;
			overflow: hidden;

			.left-wrapper {
				width: calc(100% - 160upx);
				padding: 20upx $base-row-spacing;
				font-size: $base-font-sm;
				line-height: 40upx;
				background-color: #D0E6FF;
			}

			.right-wrapper {
				display: flex;
				flex-direction: column;

				width: 160upx;
				text-align: center;
				background-color: #79A5FF;

				.size,
				.num {
					display: flex;
					flex-direction: column;
					flex: 1;
					padding: 0;
					font-size: $base-font-sm;
					line-height: 60upx;
					color: #fff;

					text {
						display: block;
						flex: 1;

						&:first-child {
							border-bottom: 1upx solid #fff;
						}
					}
				}

				.size {
					border-top: 6upx solid #D0E6FF;
				}
			}
		}
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		.bid-box {
			margin: 20px auto;
		}

		/* 投标列表 */
		.bid-list {
			margin: 0;
			border-top: 0;
			border-radius: 0;
			overflow: hidden;

			.bid-item:last-child {
				border-bottom: 0;
			}

			.flex-item {
				display: flex;
				border-radius: 20px;
				overflow: hidden;

				.left-wrapper {
					width: calc(100% - 160px);
					padding: 20px 30px;
					font-size: 16px;
					line-height: 40px;
				}

				.right-wrapper {
					width: 160px;

					.size {
						padding: 0 0 10px;
						border-top: 8px solid #D0E6FF;
					}

					.size,
					.num {
						padding: 10px 0 0;

						text {

							&:first-child {
								border-bottom: 1px solid #fff;
							}
						}
					}
				}
			}
		}
	}

	/* #endif */
</style>
